<?php $this->load->view('common/head_open'); ?>
<!-- styles needed by jScrollPane -->
<link type="text/css" href="<?php echo SKIN_URL_CSS; ?>/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1"/>

<link rel="stylesheet" type="text/css" media="screen" href="<?php echo SKIN_URL_CSS; ?>/CSSreset.min.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="<?php echo SKIN_URL_CSS; ?>/als_demo.css" />
		<link rel="stylesheet" href="<?php echo SKIN_URL_CSS; ?>/jquery.mCustomScrollbar.css">	
<script type="text/javascript">
$(document).ready(function(){
	$('#study_icon').lazylinepainter( 
	 {
	    "svgData": pathObj8,
	    "strokeWidth": 1,
		"delay":400,
	    "strokeColor": "#ec008c"
	 }).lazylinepainter('paint');
	
	$('#pink_line1').lazylinepainter('erase');
	$('#pink_line2').lazylinepainter('erase');
	$('#pink_line4').lazylinepainter('erase');
	$('#pink_line5').lazylinepainter('erase');
	$('#pink_line6').lazylinepainter('erase');
	$('#practice_icon').lazylinepainter('erase');
	$('#assignment_icon').lazylinepainter('erase');
	$('#test_icon').lazylinepainter('erase');
	$('#myspace_icon').lazylinepainter('erase');
	$('#my_group_wall_icon').lazylinepainter('erase');
	 $('#pink_line3').lazylinepainter( 
	 {
	    "svgData": pathObj3,
	    "strokeWidth": 2,
	    "strokeColor": "#ec008c"
	}).lazylinepainter('paint'); 
	});
</script>
<script src="<?php echo SKIN_URL_JS; ?>/study.js"></script>
<script src="<?php echo SKIN_URL_JS; ?>/jquery-autogrow.js"></script>
<link rel="stylesheet" href="bootstrap.vertical-tabs.css">

<style>
#page_navigation{margin-top: 40px;
margin-left: 60px;}
#page_navigation a{
	
margin: 5px;
color: #a2a2a2;
text-decoration: none;
background-image: url(<?php echo SKIN_URL_IMAGE; ?>/pagination-circle.png);
background-repeat: no-repeat;
background-position: 4px;
padding: 12px 24px 14px 11px;
padding-top: 14px;
}
.active_page{
	background-image: url(<?php echo SKIN_URL_IMAGE; ?>/pagination-circle.png);

	color:black !important;
}
.previous_link img{margin-left: -3px;}
.next_link img{margin-left: -2px;}
</style>
<style type="text/css">
.question-type1{padding-left:0px;
padding-right:0px;margin-right: 6px;}
.question-type2{padding-left:0px;
padding-right:0px;margin-right: 6px;}
.question-type3{padding-left:0px;
padding-right:0px;}

.flexipad1{padding-left:0px;
padding-right:0px;margin-right: 6px;}
.flexipad2{padding-left:0px;
padding-right:0px;margin-right: 6px;}
.flexipad3{padding-left:0px;
padding-right:0px;}

.member-analytics1{padding-left:0px;
padding-right:0px;margin-right: 6px;}
.member-analytics2{padding-left:0px;
padding-right:0px;margin-right: 6px;}
.member-analytics3{padding-left:0px;
padding-right:0px;}

.question-analytics1{padding-left:0px;
padding-right:0px;margin-right: 6px;}
.question-analytics2{padding-left:0px;
padding-right:0px;margin-right: 6px;}
.question-analytics3{padding-left:0px;
padding-right:0px;}

.side-icons{position: absolute;
z-index: 1;
width: 84%;}


.side-icons1{background-color: #fce94f;
padding-left: 0px;
padding-right: 0px;position: absolute;
z-index: 1;
width: 84%;}
@media screen and (min-width:1680px) and (max-width:1920px){
.side-icons1{
width:78%;}
.side-icons{
width:78%;}
}
@media screen and (min-width:1470px) and (max-width:1600px){
.side-icons1{
width:77%;
}
.side-icons{
width:77%;
}
}
.inform{margin-left:50px;}
@media (max-width:1025px) {
.side-icons1{width:81%;}
.side-icons{width:81%;}
#page_navigation {
margin-top: 9px;
margin-left: 60px;
}
.inform{
margin-left: 15px;
}
.flexipad1 {
padding-left: 0px;
padding-right: 0px;
margin-right: 12px;
}
.flexipad2 {
padding-left: 0px;
padding-right: 0px;
margin-right: 12px;
}
.member-analytics1 {
padding-left: 0px;
padding-right: 0px;
margin-right: 10px;
}
.member-analytics2 {
padding-left: 0px;
padding-right: 0px;
margin-right: 10px;
}
.question-analytics1 {
padding-left: 0px;
padding-right: 0px;
margin-right: 10px;
}
.question-analytics2 {
padding-left: 0px;
padding-right: 0px;
margin-right: 10px;
}
.question-type1 {
padding-left: 0px;
padding-right: 0px;
margin-right: 12px;
}
.question-type2 {
padding-left: 0px;
padding-right: 0px;
margin-right: 12px;
}
}
@media (max-width:1280px) {

#page_navigation {
margin-top: 18px;
margin-left: 60px;
}
}


	.custom-radio{
		width: 16px;
		height: 16px;
		display: inline-block;
		position: relative;
		z-index: 1;
		top: 3px;
		background: url("<?php echo SKIN_URL_IMAGE; ?>/radio-sprite.png") no-repeat 0 0 transparent;
	}
	.custom-radio:hover{
		background-position: 0 -16px;
	}
	.custom-radio.selected{
		background-position: 0 -32px;
	}
	.custom-radio input[type="radio"]{
		margin: 1px;
		position: absolute;
		z-index: 2;            
		cursor: pointer;
		outline: none;
		opacity: 0;
		/* CSS hacks for older browsers */
		_noFocusLine: expression(this.hideFocus=true); 
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		-khtml-opacity: 0;
		-moz-opacity: 0;
	}
	/* Let's Beautify Our Form */
    form{
        margin: 20px;
    }
    label{
        display: block;
        padding: 2px 0;
    }
    input[type="submit"]{
        float: left;
        background: url(<?php echo SKIN_URL_IMAGE; ?>/submit.png);
        border: none;
        border-radius: 4px;
        margin-top: 0px;
        padding: 4px 10px;
        cursor: pointer;
        outline: none;
    }
	
</style>

<script>
$(document).ready(function(){
$("#side-flags").hide();
$("#side-notes").hide();
  $("#show").click(function(){
    $("#full_question").slideDown();	
	$("#hide").show();
	$("#show").hide();
  	//$(".show").addClass(show2);
  });
  
  $("#hide").click(function(){
    $("#full_question").slideUp();	
	$("#hide").hide();
	$("#show").show();
	});
	
	$("#flag").click(function(){
	$("#side-flags").show();
	$("#side-notes").hide();
	});
	
	$("#notes").click(function(){
	$("#side-notes").show();
	$("#side-flags").hide();
	});
	
	$("#tab1").click(function(){
	$("#side-flags").hide();
	$("#side-notes").hide();
	});
	
	$("#tab2").click(function(){
	$("#side-flags").hide();
	$("#side-notes").hide();
	});
	
	$("#tab3").click(function(){
	$("#side-flags").hide();
	$("#side-notes").hide();
	});
	
	$("#tab4").click(function(){
	$("#side-flags").hide();
	$("#side-notes").hide();
	});
	
	
	$(".expand").click( function(){
		//$(".answers2").css({'position':'absolute', 'left':'0px', 'top':'0px','width':'95.6%', 'height':'386px', 'background-color':'#ffffff'}, {duration:500});	
		$(".answers2").hide();
		$(".answers3").show();
		$(".expand2").show();
		$(".expand").hide();
		$("#page_navigation").hide();
	});
		
	$(".expand2").click( function(){
		//$(".answers2").css({'position':'absolute', 'left':'0px', 'top':'0px','width':'95.6%', 'height':'386px', 'background-color':'#ffffff'}, {duration:500});	
		$(".answers3").hide();
		$(".answers2").show();
		$(".expand").show();
		$(".expand2").hide();
		$("#page_navigation").show();
	});	

});
</script>
<?php $this->load->view('common/head_close'); ?>
<!--wrapper starts-->
<section class="wrapper">
	<!--header starts-->
	<?php $this->load->view('study/study_header'); ?>
	<!--header closed-->
	<!--Container starts-->
	<div class="container-fluid">
		<div class="container">
		<section class="Container">
			<h1>Zigya Join In</h1>
			<!--information starts-->
			<div class="col-md-9 col-sm-9 col-lg-9 col-xs-12 zero-padding">
				<div class="information inform">
					<!--information_inner starts-->
					<?php $this->load->view('study/book_inner_page'); ?>
					<!--information_inner closed-->
					<div class="clear"></div>
				</div>
			</div>
			<!--information closed-->
			<!--information_aside starts-->
			<?php $this->load->view('study/book_information_aside'); ?>
			<!--information_aside closed-->
			<div class="clear"></div>
		</section>
		</div>
	</div>
	<!--Container closed-->
</section>
<!--wrapper closed-->
	<script src="<?php echo SKIN_URL_JS; ?>/jquery.mCustomScrollbar.concat.min.js"></script>
	<script>
		(function($){
			$(window).load(function(){
				
				$("#content-9").mCustomScrollbar({
					scrollButtons:{enable:true,scrollType:"stepped"},
					keyboard:{scrollType:"stepped"},
					mouseWheel:{scrollAmount:188},
					theme:"rounded-dark",
					autoExpandScrollbar:true,
					snapAmount:188,
					snapOffset:65
				});
				
				$("#content-10").mCustomScrollbar({
					scrollButtons:{enable:true,scrollType:"stepped"},
					keyboard:{scrollType:"stepped"},
					mouseWheel:{scrollAmount:188},
					theme:"rounded-dark",
					autoExpandScrollbar:true,
					snapAmount:188,
					snapOffset:65
				});
				
			});
		})(jQuery);
	</script>
	 <script src="<?php echo SKIN_URL_JS; ?>/bootstrap.min.js"></script>
	 <script type="text/javascript" src="<?php echo SKIN_URL_JS; ?>/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<?php echo SKIN_URL_JS; ?>/jquery.als-1.7.min.js"></script>
<script type="text/javascript">
			$(document).ready(function() 
			{
				$("#lista1").als({
					visible_items: 2,
					scrolling_items: 1,
					orientation: "vertical",
					circular: "no",
					autoscroll: "no"
				});
				
				$("#lista2").als({
					visible_items: 2,
					scrolling_items: 1,
					orientation: "vertical",
					circular: "no",
					autoscroll: "no"
				});
				$("#lista3").als({
					visible_items: 2,
					scrolling_items: 1,
					orientation: "vertical",
					circular: "no",
					autoscroll: "no"
				});
			});
		</script>
		<script type="text/javascript">
$(document).ready(function(){
	
	//how much items per page to show
	var show_per_page = 5; 
	//getting the amount of elements inside content div
	var number_of_items = $('#content').children().size();
	//calculate the number of pages we are going to have
	var number_of_pages = Math.ceil(number_of_items/show_per_page);
	
	//set the value of our hidden input fields
	$('#current_page').val(0);
	$('#show_per_page').val(show_per_page);
	
	//now when we got all we need for the navigation let's make it '
	
	/* 
	what are we going to have in the navigation?
		- link to previous page
		- links to specific pages
		- link to next page
	*/
	var navigation_html = '<a class="previous_link" href="javascript:previous();"><img src="<?php echo SKIN_URL_IMAGE; ?>/right-arrow1.png"></a>';
	var current_link = 0;
	while(number_of_pages > current_link){
		navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
		current_link++;
	}
	navigation_html += '<a class="next_link" href="javascript:next();"><img src="<?php echo SKIN_URL_IMAGE; ?>/left-arrow1.png"></a>';
	
	$('#page_navigation').html(navigation_html);
	
	//add active_page class to the first page link
	$('#page_navigation .page_link:first').addClass('active_page');
	
	//hide all the elements inside content div
	$('#content').children().css('display', 'none');
	
	//and show the first n (show_per_page) elements
	$('#content').children().slice(0, show_per_page).css('display', 'block');
	
});

function previous(){
	
	new_page = parseInt($('#current_page').val()) - 1;
	//if there is an item before the current active link run the function
	if($('.active_page').prev('.page_link').length==true){
		go_to_page(new_page);
	}
	
}

function next(){
	new_page = parseInt($('#current_page').val()) + 1;
	//if there is an item after the current active link run the function
	if($('.active_page').next('.page_link').length==true){
		go_to_page(new_page);
	}
	
}
function go_to_page(page_num){
	//get the number of items shown per page
	var show_per_page = parseInt($('#show_per_page').val());
	
	//get the element number where to start the slice from
	start_from = page_num * show_per_page;
	
	//get the element number where to end the slice
	end_on = start_from + show_per_page;
	
	//hide all children elements of content div, get specific items and show them
	$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
	
	/*get the page link that has longdesc attribute of the current page and add active_page class to it
	and remove that class from previously active page link*/
	$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
	
	//update the current page input field
	$('#current_page').val(page_num);
}
  
</script>
<?php $this->load->view('common/footer'); ?>